<script setup lang="ts">
import { SheetComponent } from '@antv/s2-vue'
import { shallowRef, reactive } from 'vue'
import '@antv/s2-vue/dist/style.min.css'
import { S2Options } from '@antv/s2'
// 1. 准备数据
const data = [
  {
    province: '浙江',
    city: '杭州',
    type: '笔',
    price: '1'
  },
  {
    province: '浙江',
    city: '杭州',
    type: '纸张',
    price: '2'
  }
]
// 2. 配置数据
const rawDataCfg = {
  fields: {
    columns: ['province', 'city', 'type', 'price'] // 要展示的列头字段 id 列表
  },
  meta: [
    // 列头字段对应的元信息，比如展示的中文名
    {
      field: 'province',
      name: '省份'
    },
    {
      field: 'city',
      name: '城市'
    },
    {
      field: 'type',
      name: '类型'
    },
    {
      field: 'price',
      name: '价格'
    }
  ],
  data
}

const rawOptions = {
  hierarchyType: 'grid'
} as S2Options
const dataCfg = shallowRef(rawDataCfg)
const options = reactive<S2Options>(rawOptions)
</script>

<template>
  <SheetComponent :dataCfg="dataCfg" :options="options" />
</template>

<style scoped lang="scss"></style>
